<template>
  <div class="remote-order pd-20">
    <el-form>
      <el-row>
        <el-col :span="5">
          <el-form-item label="开始时间">
            <el-date-picker v-model="searchParams.orderStartTime"
                            type="date"
                            value-format="timestamp"
                            class="w-200"
                            @change="handleQuery"
                            placeholder="选择开始日期时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="结束时间">
            <el-date-picker v-model="searchParams.orderEndTime"
                            type="date"
                            value-format="timestamp"
                            class="w-200"
                            @change="handleQuery"
                            placeholder="选择结束日期时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="检测人">
            <el-input placeholder="请输入检测人"
                      clearable
                      @clear="handleQuery"
                      v-model="searchParams.memberName"
                      class="w-200"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="订单时长">
            <el-select v-model="searchParams.orderDuration"
                       placeholder="请选择订单时长"
                       clearable
                       @clear="handleQuery">
              <el-option v-for="item in orderDurationList"
                         :key="item.key"
                         :label="item.label"
                         :value="item.key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="报告状态">
            <el-select v-model="searchParams.reportStatus"
                       placeholder="请选择报告状态"
                       clearable
                       @change="handleQuery">
              <el-option v-for="item in reportStatusList"
                         :key="item.key"
                         :label="item.label"
                         :value="item.key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="订单来源">
            <el-input placeholder="请输入订单来源"
                      clearable
                      @change="handleQuery"
                      v-model="searchParams.orderFrom"
                      class="w-200"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-button type="primary"
                     @click="handleQuery">查 询</el-button>
          <el-button type="success"
                     :disabled="isExportData"
                     @click="exportData">导 出</el-button>
        </el-col>
      </el-row>
    </el-form>
    <element-table :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="searchParams.pageIndex"
                   :pageSize="searchParams.pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:reportStatus="{row}">
        <span v-if="row.reportStatus === 0">未分析</span>
        <span v-if="row.reportStatus === 1">分析中</span>
        <span v-if="row.reportStatus === 2">报告已出</span>
      </template>

    </element-table>
  </div>
</template>
<script>
  import elementTable from '@/base/ElementTable.vue'
  export default {
    name: 'holterOrder',
    data () {
      return {
        searchParams: {
          orderStartTime: '', // 订单开始时间
          orderEndTime: '', // 订单结束时间
          memberName: '', // 检测人
          phone: '', // 电话
          orderDuration: '', // 订单时长（1 为24小时； 2 为48小时； 3 为72小时）
          reportStatus: '', // 报告状态（0 为分析中， 1 为报告已出）
          orderFrom: '', // 订单来源
          pageIndex: 1,
          pageSize: 20
        },
        orderDurationList: [
          { key: 1, label: '24小时' },
          { key: 2, label: '48小时' },
          { key: 3, label: '72小时' }
        ],
        reportStatusList: [
          { key: 0, label: '未分析' },
          { key: 1, label: '分析中' },
          { key: 2, label: '报告已出' }
        ],
        loading: false,
        isExportData: false,
        pageTotal: 0,

        tableData: [],
        columns: [
          {
            label: '订单时间',
            prop: 'orderTime',
            width: 200,
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.orderStartTime), 'yyyy-MM-dd hh:mm:ss')
            }
          }, {
            label: '检测人',
            prop: 'memberName',
            width: 100
          }, {
            label: '性别',
            prop: 'sex',
            formatter: (row, cellValue) => {
              return row.sex === 1 ? '男' : '女'
            }
          }, {
            label: '年龄',
            prop: 'age',
            formatter: (row, cellValue) => {
              let birthdays = new Date(row.age.replace(/-/g, "/"));
              let d = new Date();
              let age = d.getFullYear() - birthdays.getFullYear() - (d.getMonth() < birthdays.getMonth() || (d.getMonth() == birthdays.getMonth() && d.getDate() < birthdays.getDate()) ? 1 : 0);
              return age
            }
          }, {
            label: '联系电话',
            prop: 'phone'
          }, {
            label: '测试次数',
            prop: 'testCount'
          }, {
            label: '解读医生',
            prop: 'readDoctorName'
          }, {
            label: '解读费用（元）',
            prop: 'readPrice'
          }, {
            width: 160,
            label: '报告状态',
            prop: 'reportStatus',
            isSlot: true
          }, {
            label: '订单来源',
            prop: 'orderFrom'
          }, {
            label: '分店名称',
            prop: 'branchName'
          }
        ]
      }
    },
    methods: {
      handleQuery (){
        this.searchParams.pageIndex=1
        this.getList()
      },
      // 列表查询
      async getList () {
        this.loading = true
        let { pageIndex } = { ...this.searchParams }
        const { data: res } = await this.post(this.api.ECG.queryFastList, {
          ...this.searchParams,
          pageIndex: pageIndex - 1
        })
        if (res.code === '200') {
          this.loading = false
          this.tableData = res.object
          this.pageTotal = res.totalNum
        }
      },
      // 分页
      handleChangePage (page) {
        this.searchParams.pageIndex = page
        this.getList();
      },
      // 清空订单来源
      changeOrderFrom (val) {
        this.searchParams.orderFrom = null
        this.getList()
      },
      // 导出 .xls
      exportData () {
        if (this.tableData.length == 0) {
          this.$message.error('没有数据可导出!')
          return false
        }
        this.isExportData = true;
        setTimeout(() => {
          this.isExportData = false;
        }, 2000)

        let url = this.api.ECG.exportECGDFast
        this.commonFunction.exportFileData(this.searchParams, url, '远程订单', '.xls')
      },
    },
    created () {
      this.getList()
    },
    components: {
      'element-table': elementTable
    }
  }
</script>
